<template>
  <div class="tool-complex">
    <video
      style="width: 100%; height: 100%; object-fit: fill"
      :autoplay="attr.autoplay"
      :loop="attr.loop"
      muted
    >
      <source :src="attr.url" />
    </video>
  </div>
</template>

<script>
import mixins from "../mixin";
export default {
  name: "tool-video",
  mixins: [mixins],
  data() {
    return {
      attr: null,
    };
  },
  pageData: {
    version: "0.0.1",
    name: "tool-video",
    title: "视频",
    count: 0,
    width: 300,
    height: 150,
    config: {
      label: "视频", // 组件名 （实现交互选择）
      type: "api", // 数据请求方式
      params: null, // 请求参数
      url: '', // 数据请求地址
      active: [], // 交互方法
      attr: [
        {
          key: "url", // 属性
          title: "视频地址", // 属性名
          formType: "text-string", // 属性组件
          group: "basics", // 属性分类 store=>design=>group
          type: "String", // 属性值类型
          data: "https://talk.gitee.com/video/gitee-enterprise-landing-page-cover.mp4", // 属性值
        },
        {
					key: "autoplay",
					title: "自动播放",
					formType: "radio-select",
					group: 'basics',
					type: 'Boolean',
					data: false,
				},
        {
					key: "loop",
					title: "循环",
					formType: "radio-select",
					group: 'basics',
					type: 'Boolean',
					data: false,
				},
      ],
    },
  },
};
</script>

<style scoped>
.tool-complex {
  width: 100%;
  height: 100%;
  transition: all 0.58s;
}
</style>
